{extend name="base" /}
{block name="style"}
<style>
    .main{ padding-top:10px;padding-bottom: 30px; }
    .main p{ font-size: 14px; margin: 0; }
    .main h3{ color:#222;font-weight: bold; }
    /*.main a:focus{ color:#fff; }*/
    .c-inbanner{ background: rgba(230,230,230,.6)}
    header .child-menu a{ color:#666; }
    .main-row>div.col-xs-12{ margin-bottom: 15px; }
    .party-header{ border-bottom: 1px solid #E0E0E0;height:40px;line-height:40px; }
    .header-word{ float: left;width:100px;text-align: center; background: #AF3124;color:#fff; }
    .header-date{ float: right; }
    .header-list li{ border-bottom: 1px dashed #E0E0E0; padding-top:5px ;  }
    .header-list li:last-child{ border-bottom: 0; }
    .header-label{ width: 15%; position: relative; }
    .first-detail{ width: 85%; }
    .header-label span{ position: absolute;left:10px;top:15px;color:#fff; font-weight: bold;letter-spacing: 2px; }

    .party-mid{ position: relative; }
    .party-bottom{  padding:0 15px; }
    .party-img{ width:100%; }
    .face-block{ position: absolute;right:15px;top:0;color:#fff;padding:25px; width:350px;height:100%; background: rgba(0,0,0,.5) }
    .face-title{  display: block; text-align: center;color:#fff; font-size: 20px; text-align: center}
    /*.face-title:hover{ text-decoration: underline; }*/
    .face-block p{ line-height: 28px; }
    .face-block a{ color:#fff;font-size: 14px; }
    .face-block a.face-title{ font-size: 20px; }
    .face-block a:hover{ color:#fff; }
    hr{ width:100%;color:#fff;margin: 15px 0; }
    .w-6{ width:59%;float: left;margin-right: 2%;position: relative; }
    .w-4{ width:39%;float: left;position: relative; }
    .w-6 .face-block{ right: 0; width:300px; }
    .w-6 .face-block a{ display: block;  }
    /*.w-6 .face-block a:hover{ text-decoration: underline; }*/
    .w-4 .face-block{ top:100%; height: 50px;margin-top: -50px; left:0;width: 100%; padding:0;}
    .w-4 .face-block a{ line-height: 50px; }
    /*轮播*/
    .carousel-caption{ bottom:0;left:0;right:0; padding:15px 30px;text-align: left; background: rgba(0,0,0,.5) }
    .carousel-indicators{ bottom:0;left:75%;width:25%;margin: 0; padding:13px 0;}
    .carousel-indicators li{ margin: 0 3px; width:12px;height:12px;border-radius: 12px;border:0; background: rgba(255,255,255,.3)}
    .carousel-indicators .active{ margin: 0 3px; }
    @media (max-width: 767px) {
        .main h3{ font-size: 15px;margin-top: 5px; margin-bottom: 2px;}
        .main p{ line-height: 18px; font-size: 13px; }
        .party-header{height:30px;line-height:30px; }

        .header-list li{ padding-bottom: 5px; }
        .detail-date{ margin-top: 0px; font-size: 14px; }
        .face-block{ padding:15px; }
        .header-label span{ font-size: 14px; left: 10px;top:12px; }
        .header-label{ width: 15%; }
        .header-label img{ width: 90%; }
        hr{ margin:10px 0; }
    }
    @media (min-width: 768px) and (max-width: 991px) {
        .main h3{ font-size: 14px;margin-top: 5px; margin-bottom: 2px;}
        .main p{ line-height: 18px; }
        .header-list li{ padding-bottom: 5px; }
        .detail-date{ margin-top: 0px; font-size: 14px; }
        .face-block{ padding:15px; }
        .header-label{ width: 10%;  }
        .first-detail{ width: 90%; }
        .header-label img{ width:90%; }
        .header-label span{ font-size: 12px; left: 2px;top:10px; }
        hr{ margin:10px 0; }
        #carousel-party { margin-top: 50px; }
    }
    @media (min-width: 992px){
        .main h3{ font-size: 17px;margin-top: 5px; margin-bottom: 2px;}
        .main p{ line-height: 20px; }
        .header-list li{ padding-bottom: 5px; }
        .detail-date{ margin-top: 3px; }
        .face-block a{ line-height: 26px; }
    }
    @media (min-width: 1200px) {
        .main h3{ font-size: 20px;  margin-top: 10px;margin-bottom: 5px;}
        .main p{ line-height: 24px; }
        .header-list li{ padding-bottom:10px; }
        .detail-date{ margin-top: 10px; }
        .face-block a{ line-height: 28px; }

    }
    .ec {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .c-inbanner {
        background: rgba(230,230,230,.6)
    }
    header .child-menu a {
        color:#666;
    }
</style>
{/block}
{block name="content"}
<section id="banner">
    <div class="banner-box">
        <img src="/assets/img/head.png" >
    </div>
    <!-- 下方二级菜单 -->
    <div class="detail detail-path hidden-xs">
        <div class="container">
            <div class="detail-home">
                <a href="/">
                    <img src="/assets/img/home.png" />
                </a>
                <a href="/party" id="main-title">党建内容</a>
            </div>
            <ul class="list-inline detail-title" id="detail-title">
                <li>
                    <a href="/party/structure"data-path="structure">党组织架构</a>
                </li>
                <li>
                    <a href="/party/dynamic"data-path="dynamic">党建动态</a>
                </li>
                <li>
                    <a href="/party/relative"data-path="relative">相关文件</a>
                </li>
                <li>
                    <a href="/party/rule"data-path="rule">工作制度</a>
                </li>
                <span id="subline"></span>
            </ul>
        </div>
    </div>
</section>

<section class="main">
    <div class="container">
        <div class="row main-row">
            <div class="col-xs-12">
                <div class=" party-header clearfix">
                    <span class="header-word">党建动态</span>
                    <span class="header-date">{$top.create_time|date="Y/m/d",###}</span>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="row party-top">
                    <div class="col-xs-12 col-sm-6">
                        <!-- 轮播-->
                        <div id="carousel-party" class="carousel slide" data-ride="carousel">
                            <!-- Indicators -->
                            <ol class="carousel-indicators">
                                <li data-target="#carousel-party" data-slide-to="0" class="active"></li>
                                <li data-target="#carousel-party" data-slide-to="1"></li>
                                <li data-target="#carousel-party" data-slide-to="2"></li>
                            </ol>
                            <!-- Wrapper for slides -->
                            <div class="carousel-inner" role="libox">
                                <div class="item active">
                                    <img src="/assets/img/party_01.png" >
                                    <div class="carousel-caption">
                                        <p>习近平主持召开中央全面深化改革...</p>
                                    </div>
                                </div>
                                <div class="item">
                                    <img src="/assets/img/party_01.png" >
                                    <div class="carousel-caption">
                                        <p>习近平主持召开中央全面深化改革...</p>
                                    </div>
                                </div>
                                <div class="item">
                                    <img src="/assets/img/party_01.png" >
                                    <div class="carousel-caption">
                                        <p>习近平主持召开中央全面深化改革...</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-xs-12 col-sm-6">
                        <ul class="header-list">
                            <li class="header-first clearfix">
                                <div class="header-label lf">
                                    <img src="/assets/img/label.png" alt=""/>
                                    <span>头条</span>
                                </div>
                                <div class="first-detail lf">
                                    <a href="/party/dynamic/{$top.id}">
                                        <h3>{$top.title}</h3>
                                        <p class="ec">{$top.abstract}</p>
                                    </a>
                                </div>
                            </li>
                            {volist name="tops" id="vo"}
                            <li>
                                <a href="/party/dynamic/{$vo.id}">
                                    <div class="common-header clearfix">
                                        <h3 class="lf">{$vo.title}</h3>
                                        <span class="detail-date rt">{$vo.create_time|date="Y/m/d",###}</span>
                                    </div>
                                    <p class="ec">{$vo.abstract}</p>
                                </a>
                            </li>
                            {/volist}
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 party-mid">
                <img src="/assets/img/party_mid.png" class="party-img" alt=""/>
                <div class="face-block hidden-xs">
                    <a href="javascript:void(0)"  class="face-title">相关文件</a>
                    <hr/>
                    <a href="/party/relative">为贯彻落实党的十九大对持之以恒正风肃纪的新部署、新要求，坚持聚焦问题、把握关键、统筹推进、长抓不解，在新形势下进一步加强中国电子务实高效、勤俭节约工作作风建设，加快推进中国电子市场化结构性改革，根据《中共中央政治......</a>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="row party-bottom">
                    <div class="w-6">
                        <img src="/assets/img/party_bottom01.png" class="party-img" alt=""/>
                        <div class="face-block hidden-xs">
                            <a href="javascript:void(0)" class="face-title">规章制度</a>
                            <hr/>
                            <a href="party/rule/1">熊猫置业党员发展工作规程</a>
                            <a href="party/rule/2">熊猫置业党员活动日实施办法</a>
                            <a href="party/rule/3">熊猫置业基层党支部“三会一课”制度</a>
                        </div>
                    </div>
                    <div class="w-4">
                        <img src="/assets/img/party_bottom02.png" class="party-img" alt=""/>
                        <div class="face-block hidden-xs">
                            <a href="/party/structure" class="face-title">党组织架构</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{/block}
{block name="script"}
<script>
    $('.carousel').carousel({
        interval: 4000
    })
    //  bootlint.showLintReportForCurrentDocument([]);
</script>
{/block}